<template>
  <div class="orderList">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-select v-model="params.status" placeholder="请选择工单状态">
          <el-option value="待接单"></el-option>
          <el-option value="进行中"></el-option>
          <el-option value="已完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="安装" name="installTab">
        <el-table :data="tableData.list">
          <el-table-column
            label="编号"
            width="60"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            label="工程"
            width="300"
            align="center"
            prop="engineer_name"
          ></el-table-column>
          <el-table-column
            label="设备"
            align="center"
            width="300"
            prop="device_name"
          ></el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="status"
            width="80"
          ></el-table-column>
          <el-table-column
            label="类型"
            align="center"
            prop="type"
            width="80"
          ></el-table-column>
          <el-table-column
            label="报修原因"
            align="center"
            prop="bill_why"
          ></el-table-column>
          <el-table-column
            label="报修时间"
            align="center"
            prop="create_time"
            width="300"
          >
            <template v-slot="{ row }">
              {{ row.create_time | dataFomat }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template v-slot="{ row }">
              <el-button type="text" @click="toDetail(row)">详情</el-button>
              <el-button
                type="text"
                @click="cancelClick(row.id)"
                :disabled="
                  row.status == '进行中' || row.status == '已完成'
                    ? true
                    : false
                "
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="维修" name="fixTab">
        <el-table :data="tableData.list">
          <el-table-column
            label="编号"
            width="60"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            label="工程"
            width="300"
            align="center"
            prop="engineer_name"
          ></el-table-column>
          <el-table-column
            label="设备"
            align="center"
            width="300"
            prop="device_name"
          ></el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="status"
            width="80"
          ></el-table-column>
          <el-table-column
            label="类型"
            align="center"
            prop="type"
            width="80"
          ></el-table-column>
          <el-table-column
            label="报修原因"
            align="center"
            prop="bill_why"
          ></el-table-column>
          <el-table-column
            label="报修时间"
            align="center"
            prop="create_time"
            width="300"
          >
            <template v-slot="{ row }">
              {{ row.create_time | dataFomat }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template v-slot="{ row }">
              <el-button type="text" @click="toDetail(row)">详情</el-button>
              <el-button
                type="text"
                @click="cancelClick(row.id)"
                :disabled="
                  row.status == '进行中' || row.status == '已完成'
                    ? true
                    : false
                "
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="拆机" name="dismount">
        <el-table :data="tableData.list">
          <el-table-column
            label="编号"
            width="60"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            label="工程"
            width="300"
            align="center"
            prop="engineer_name"
          ></el-table-column>
          <el-table-column
            label="设备"
            align="center"
            width="300"
            prop="device_name"
          ></el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="status"
            width="80"
          ></el-table-column>
          <el-table-column
            label="类型"
            align="center"
            prop="type"
            width="80"
          ></el-table-column>
          <el-table-column
            label="报修原因"
            align="center"
            prop="bill_why"
          ></el-table-column>
          <el-table-column
            label="报修时间"
            align="center"
            prop="create_time"
            width="300"
          >
            <template v-slot="{ row }">
              {{ row.create_time | dataFomat }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template v-slot="{ row }">
              <el-button type="text" @click="toDetail(row)">详情</el-button>
              <el-button
                type="text"
                @click="cancelClick(row.id)"
                :disabled="
                  row.status == '进行中' || row.status == '已完成'
                    ? true
                    : false
                "
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="block">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="parseInt(tableData.page)"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="parseInt(tableData.pageSize)"
        layout="prev, pager, next"
        :total="parseInt(tableData.total)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get, postJSON, del } from "@/utils/request.js";
import { P } from "@antv/g2plot";

export default {
  data() {
    return {
      activeName: "installTab",
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
        type: "安装",
      },
      formInline: {},
    };
  },
  created() {
    this.getOrder();
  },
  filters: {
    dataFomat(data) {
      let time = new Date(data);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      month = month > 10 ? month : "0" + month;
      let day = time.getDate();
      day = day > 10 ? day : "0" + day;
      let hour = time.getHours();
      hour = hour > 10 ? hour : "0" + hour;
      let min = time.getMinutes();
      min = min > 10 ? min : "0" + min;
      let sec = time.getSeconds();
      sec = sec > 10 ? sec : "0" + sec;
      return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
    },
  },
  methods: {
    //网络请求
    getOrder() {
      get("/workorder/pageQuery", this.params).then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
    //事件监听
    handleClick(tab) {
      if (tab.name == "installTab") {
        this.params.type = "安装";
        this.getOrder();
      } else if (tab.name == "fixTab") {
        this.params.type = "维修";
        this.getOrder();
      } else if (tab.name == "dismount") {
        this.params.type = "拆机";
        this.getOrder();
      }
    },
    handleCurrentChange(page) {
      this.params.page = page;
      get("/workorder/pageQuery", this.params).then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
    toSubmit() {
      this.getOrder();
    },
    cancelClick(id) {
      this.$confirm("此操作将取消该工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        get("/workorder/cancelOrder", { id }).then(() => {
          this.getOrder();
          this.$message({
            type: "success",
            message: "取消成功!",
          });
        });
      });
    },
    toDetail(row) {
      this.$router.push({
        path: "Details",
        query: row,
      });
    },
  },
};
</script>

<style>
</style>